<template>
  <div class="file-server-config">
    <el-card class="config-card">
      <template #header>
        <div class="card-header">
          <h2>文件服务器配置</h2>
        </div>
      </template>
      
      <el-form ref="formRef" :model="form" label-width="150px" :rules="rules">
        <!-- 启用文件服务器 -->
        <el-form-item label="启用文件服务器">
          <el-switch v-model="form.enabled" />
        </el-form-item>
        
        <!-- 如果启用了文件服务器，显示配置选项 -->
        <template v-if="form.enabled">
          <!-- 端口 -->
          <el-form-item prop="port" label="端口" required>
            <el-input-number 
              v-model="form.port" 
              :min="1024" 
              :max="65535"
              class="w-100"
            ></el-input-number>
            <div class="form-help-text">推荐使用1024以上的端口</div>
          </el-form-item>
          
          <!-- 基础路径 -->
          <el-form-item prop="basePath" label="服务器路径" required>
            <el-input v-model="form.basePath"></el-input>
            <div class="form-help-text">服务器上的实际文件路径，例如: /mnt/sda2/memo_boost</div>
          </el-form-item>
          
          <!-- URL路径 -->
          <el-form-item prop="urlPath" label="URL路径" required>
            <el-input v-model="form.urlPath"></el-input>
            <div class="form-help-text">访问URL的路径前缀，例如: /memo_boost</div>
          </el-form-item>
          
          <!-- 允许目录浏览 -->
          <el-form-item label="允许目录浏览">
            <el-switch v-model="form.allowDirListing" />
            <div class="form-help-text">是否允许浏览目录内容列表</div>
          </el-form-item>
        </template>
      </el-form>
      
      <div class="form-actions">
        <el-button type="primary" @click="saveConfig" :loading="loading">保存配置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

export default {
  name: 'FileServerConfig',
  setup() {
    const formRef = ref(null)
    const loading = ref(false)
    
    const form = reactive({
      enabled: false,
      port: 8081,
      basePath: '',
      urlPath: '',
      allowDirListing: false
    })
    
    const rules = {
      port: [
        { required: true, message: '请输入端口号', trigger: 'blur' },
        { type: 'number', min: 1024, max: 65535, message: '端口必须在1024-65535之间', trigger: 'blur' }
      ],
      basePath: [
        { required: true, message: '请输入服务器路径', trigger: 'blur' }
      ],
      urlPath: [
        { required: true, message: '请输入URL路径', trigger: 'blur' }
      ]
    }
    
    // 加载配置
    const loadConfig = async () => {
      try {
        const response = await axios.get('/api/fileserver/config')
        if (response.data.success && response.data.data) {
          const config = response.data.data
          form.enabled = config.enabled || false
          form.port = config.port || 8081
          form.basePath = config.base_path || ''
          form.urlPath = config.url_path || ''
          form.allowDirListing = config.allow_dir_listing || false
        }
      } catch (error) {
        ElMessage.error('加载配置失败: ' + (error.response?.data?.message || error.message))
      }
    }
    
    // 保存配置
    const saveConfig = async () => {
      if (!form.enabled) {
        // 如果禁用了文件服务器，直接更新配置
        await updateConfig()
        return
      }
      
      if (formRef.value) {
        formRef.value.validate(async (valid) => {
          if (valid) {
            await updateConfig()
          } else {
            ElMessage.warning('请正确填写所有必填字段')
          }
        })
      }
    }
    
    // 更新配置到服务器
    const updateConfig = async () => {
      loading.value = true
      try {
        // 构建配置对象
        const config = {
          enabled: form.enabled,
          port: form.port,
          base_path: form.basePath,
          url_path: form.urlPath,
          allow_dir_listing: form.allowDirListing
        }
        
        // 发送更新的配置
        const response = await axios.post('/api/fileserver/config', config)
        if (response.data.success) {
          ElMessage.success('文件服务器配置已保存')
          
          // 如果开启了文件服务器，显示访问链接
          if (form.enabled) {
            const urlPath = form.urlPath.startsWith('/') ? form.urlPath : '/' + form.urlPath
            ElMessage.success({
              message: `文件服务器将在 http://[您的IP或域名]:${form.port}${urlPath} 可访问`,
              duration: 10000
            })
          }
        } else {
          ElMessage.error('保存配置失败: ' + response.data.message)
        }
      } catch (error) {
        ElMessage.error('保存配置失败: ' + (error.response?.data?.message || error.message))
      } finally {
        loading.value = false
      }
    }
    
    onMounted(() => {
      loadConfig()
    })
    
    return {
      form,
      formRef,
      rules,
      loading,
      saveConfig
    }
  }
}
</script>

<style scoped>
.file-server-config {
  max-width: 800px;
  margin: 0 auto;
}

.config-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-actions {
  margin-top: 20px;
  text-align: right;
}

.form-help-text {
  font-size: 12px;
  color: #606266;
  margin-top: 5px;
}

.w-100 {
  width: 100%;
}
</style> 